<template>
    <div>
        <!--查询条件start --111s-->
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <el-form-item class="query-form-item">
                <el-input v-model="query.username"
                          placeholder="商城店账号"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-refresh"
                           @click="onRest"></el-button>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--查询条件end-->

        <!--列表start --->
        <el-table ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                  @selection-change="handleSelectionChange"
                  border>
            <el-table-column label="序号" prop="commodityname" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="商家账号" prop="username" align="center"/>
            <el-table-column label="提货总数"
                             prop="totalCount"
                             :show-overflow-tooltip="true"
                             align="center">
            </el-table-column>
            <el-table-column label="操作"
                             width="150"
                             align="center">
                <template slot-scope="scope">
                    <el-button type="primary"
                               size="mini"
                               @click.native="showDialogAddOrEdit(scope.$index,scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end --222e-->
        <!--分页模块start-->
        <el-pagination class="pagination-container"
                       background
                       :page-size="query.pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :current-page="query.currentPage"
                       :page-sizes="[10, 20, 30, 50]"
                       :total="totalNumber"></el-pagination>
        <!--分页模块end-->

        <!--新增/编辑弹框start--333s-->
        <el-dialog title="商家提货单"
                   :visible.sync="dialogAddOrEdit"
                   width="80%"
                   :before-close="hideDialogAddOrEdit">
            <el-form :model="checkQuery"
                     :rules="rules"
                     ref="ruleForm"
                     class="demo-ruleForm">

                <el-form-item prop="userId">
                    <el-input v-model="checkQuery.pickuporderno" style="width:400px;margin-right: 20px;" placeholder="订单编号" clearable></el-input>
                    <el-button type="primary"
                               icon="el-icon-search"
                               @click="onCheckSubmit">查询</el-button>
                </el-form-item>

                <!--列表start --->
                <el-table ref="merchantsgoodslist"
                          v-loading="checkLoading"
                          :data="merchantsgoodslist"
                          :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                          @selection-change="checkHandleSelectionChange"
                          border>
                    <el-table-column label="序号"
                                     prop="commodityid"
                                     width="100"
                                     align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单编号"
                                     prop="pickuporderno"
                                     width="400"
                                     align="center" />
                    <el-table-column label="商品名"
                                     prop="commodityname"
                                     align="center" />
                    <el-table-column label="提货数量"
                                     prop="pickupnum"
                                     width="150"
                                     align="center" />
                    <el-table-column label="提货状态"
                                     prop="secondorderstatus"
                                     width="150"
                                     align="center" >
                        <template slot-scope="scope">
                            <!-- 0:未付款 1:待发货 2:待收货 3:待评价 4:已完成 5  -->
                            <span v-if="scope.row.secondorderstatus == 0" style="margin-left:20px;color:#dc0101;">未付款</span>
                            <span v-else-if="scope.row.secondorderstatus == 1" style="margin-left:20px;color:#ffa659;">待发货</span>
                            <span v-else-if="scope.row.secondorderstatus == 2" style="margin-left:20px;color:#ffa659;">待收货</span>
                            <span v-else-if="scope.row.secondorderstatus == 3" style="margin-left:20px;color:#ffa659;">待评价</span>
                            <span v-else-if="scope.row.secondorderstatus == 4" style="margin-left:20px;color:#4acf1e;">已完成</span>
                            <span v-else style="margin-left:20px;color:#dc0101;">未付款</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.secondorderstatus == 1" type="primary"
                                       size="mini"
                                       @click.native="onSendGoods(scope.row)">去发货</el-button>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页模块start-->
                <el-pagination class="pagination-container"
                               background
                               :page-size="checkQuery.pageSize"
                               @size-change="checkHandleSizeChange"
                               @current-change="checkHandleCurrentChange"
                               layout="total,sizes,prev, pager, next, jumper"
                               :current-page="checkQuery.currentPage"
                               :page-sizes="[10, 20, 30, 50]"
                               :total="checkTotalNumber"></el-pagination>

            </el-form>
        </el-dialog>

        <!-- 发货单 -->
        <el-dialog title="发货确认" :visible.sync="dialogFormVisible">
            <el-form  v-loading="formLoading" :model="sendGoodsData" :rules="sendGoodsDataRules" ref="sendGoodsDataRules">
                <el-form-item label="发货物流" prop="expressname">
                    <el-input v-model="sendGoodsData.expressname" placeholder="请输入发货物流" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发货物流单号" prop="expressnumber">
                    <el-input v-model="sendGoodsData.expressnumber" placeholder="请输入发货物流单号" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelSendGoods">取 消</el-button>
                <el-button type="primary" @click="sendGoods('sendGoodsDataRules')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    import {
        getMerchantsGoods
    } from "../../api/broadcastCommodity/broadcastCommodity.js";
    import {
        getAdminList, // 获取商家列表
        sendGoods, // 发货
        getOrderList // 获取商家提货单列表
    } from "../../api/activityCommodity/activityCommodity.js";
    import {BASE_URL} from "../../config/app";
    /*用作表单的数据初始化*/
    const formJson = {
        ids: ""
    };

    export default {
        components: {},
        data() {
            return {
                uploadUrl: BASE_URL + '/goldendays-currency/tool/uploadpro', //上传图片
                uploadData: [],
                query: {
                    currentPage: 1,
                    username: null,
                    pageSize: 10
                },
                sendGoodsData: {
                    expresscode: null, // 快递编码
                    expressname: null, // 快递名称
                    expressnumber: null, // 快递单号
                    pickuporderid: null // 进货订单id
                },
                sendGoodsDataRules: {
                    //表单校验
                    expressname: {
                        required: true,
                        message: "请输入发货物流",
                        trigger: "blur"
                    },
                    expressnumber: {
                        required: true,
                        message: "请输入发货物流单号",
                        trigger: "blur"
                    }
                },
                dialogFormVisible: false,
                checkQuery: {
                    currentPage: 1,
                    pageSize: 10,
                    pickuporderno: null,
                    userid: null
                },
                commodityIdArr: [],
                checkTotalNumber: 0, //分页总页数
                formName: null,
                formMap: {
                    add: "添加",
                    edit: "编辑"
                },
                merchantslist: [],
                merchantsgoodslist: [],
                list: [], //列表集合
                totalNumber: 0, //分页总页数
                loading: true, //列表加载
                checkLoading: false,
                formSumbitLoding: false, //表单提交加载
                cancelToggle: false, //列表是否全选
                multipleSelection: [], //多选集合
                dialogAddOrEdit: false, //新增或编辑弹框开关
                dialogAddOrEditName: "", //新增或编辑弹框名字
                formData: formJson, //新增或修改的对象
                rules: {
                    ids: {
                        required: true,
                        message: "请选择商品",
                        trigger: "blur"
                    }
                },
                formLoading: false
            };
        },
        filters: {
            statusFilter(status) {
                let statusFilter = "";
                switch (status) {
                    case 0:
                        statusFilter = "未付款";
                        break;
                    case 1:
                        statusFilter = "待发货";
                        break;
                    case 2:
                        statusFilter = "待收货";
                        break;
                    case 3:
                        statusFilter = "待评价";
                        break;
                    case 4:
                        statusFilter = "已完成";
                        break;
                    case 5:
                        statusFilter = "断货中";
                        break;
                    default:
                        statusFilter = "未付款";
                        break;
                }
                return statusFilter;
            }
        },
        methods: {
            //上传图片
            handleSuccess(response, file) {
                this.isSelect = false;
                console.log("上传成功");
                if (response.status === 1) {
                    const filePath = response.data;
                    this.formData.topcategorypic = filePath;
                    console.info(filePath + file);
                    return;
                }

                this.$message.error("上传文件报错");
            },
            handleChange(file) {
                this.fileName = file.name ? file.name : "";
                return false;
            },
            // 显示弹窗
            onSendGoods(row) {
                this.dialogFormVisible = true;
                this.row = row;
                this.sendGoodsData.pickuporderid = row.pickuporderid;
            },
            // 取消发货
            cancelSendGoods() {
                this.dialogFormVisible = false;
                this.sendGoodsData = {
                    expresscode: null, // 快递编码
                    expressname: null, // 快递名称
                    expressnumber: null, // 快递单号
                    pickuporderid: null // 进货订单id
                };
            },
            // 发货
            sendGoods(form) {
                this.$refs[form].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        sendGoods(this.sendGoodsData)
                            .then(response => {
                                if (response.code != 0) {
                                    this.$message.error(response.message);
                                    this.formLoading = false;
                                    return false;
                                }
                                this.formLoading = false;
                                this.$message.success("发货成功！");
                                this.row.secondorderstatus = 2;
                                this.dialogFormVisible = false;
                                this.sendGoodsData = {
                                    expresscode: null, // 快递编码
                                    expressname: null, // 快递名称
                                    expressnumber: null, // 快递单号
                                    pickuporderid: null // 进货订单id
                                };
                            })
                            .catch(err => {
                                this.$message.error(err);
                                this.formLoading = false;
                            });
                    }
                });
            },
            /*获取列表事件*/
            getAdminList() {
                this.loading = true;
                //   getTopList
                getAdminList(this.query)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.loading = false;
                            return false;
                        }
                        console.log(response);
                        this.list = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                    });
            },

            /*新增或者编辑提交事件*/
            formSumbit() {
                //表单校验通过
                let commodityIds = this.commodityIdArr.toString();
                this.formData.commodityIds = commodityIds;
                console.info(this.formData);
                this.$refs["ruleForm"].validate(valid => {
                    // console.log(valid)
                    if (valid) {
                        this.formSumbitLoding = true;
                        this.formData.inputdata = JSON.stringify(this.formData);
                        // batchAddDailyNew(this.formData)
                        //     .then(response => {
                        //         this.formSumbitLoding = false;
                        //         if (response.code != 0) {
                        //             this.$message.error(response.message);
                        //             return false;
                        //         }
                        //         this.merchantsgoodslist = [];
                        //         this.checkTotalNumber = 0;
                        //         this.$message.success("操作成功");
                        //         this.hideDialogAddOrEdit();
                        //         // 加载表格数据
                        //         this.getAdminList();
                        //         this.getOrderList();
                        //     })
                        //     .catch(() => {
                        //         this.formSumbitLoding = false;
                        //     });
                    }
                });
                //new URLSearchParams(this.query)  提交数据格式不正确时可以转一下
            },

            closeCheck() {
                this.dialogAddOrEdit = false;
                this.merchantsgoodslist = [];
                this.checkTotalNumber = 0;
            },
            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.getAdminList();
            },

            /*刷新*/
            onRest() {
                //刷新事件需要重置查询条件
                this.query = {
                    currentPage: 1,
                    pageSize: 10
                };
                this.getAdminList();
            },

            //显示 查看弹框
            detailForm(index, row) {
                if (row !== null) {
                    console.info(row);
                    this.dialogAddOrEdit = true;
                    this.formData = Object.assign({}, row);
                    let data = {
                        name: "",
                        url: ""
                    };
                    if (row.topcategorypic) {
                        this.uploadData = [];
                        let nameurl = row.topcategorypic;
                        data.url = nameurl;
                        data.name = nameurl.substring(nameurl.lastIndexOf("/") + 1);
                        this.uploadData.push(data);
                    }

                    this.dialogAddOrEditName = "编辑";
                }
            },

            /*显示 -新增或者编辑弹框*/
            showDialogAddOrEdit(index, row) {
                console.log(index, row);
                this.checkQuery.userid = row.userid;
                this.formData = Object.assign({}, formJson);
                this.dialogAddOrEdit = true;
                this.getOrderList();
            },

            /*隐藏 -新增或编辑弹框*/
            hideDialogAddOrEdit() {
                this.dialogAddOrEdit = false;
                this.merchantsgoodslist = [];
                //隐藏弹框时需要清除弹框内容
                if (this.$refs["ruleForm"]) {
                    this.$refs["ruleForm"].resetFields(); //清除formData表单
                    this.$refs["ruleForm"].clearValidate(); //清除表单验证
                }
                //如果上传文件，还需要清除文件列表
            },
            // 查询商家提货单列表
            getOrderList() {
                this.checkLoading = true;
                getOrderList(this.checkQuery)
                    .then(response => {
                        console.log(response);
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.checkLoading = false;
                            return false;
                        }
                        this.checkLoading = false;
                        this.checkTotalNumber = response.data.totalNumber || 0;
                        this.merchantsgoodslist = response.data.list || [];
                        console.log(this.merchantsgoodslist);
                    })
                    .catch(() => {
                        this.checkLoading = false;
                        this.merchantsgoodslist = [];
                    });
            },
            // 弹窗下拉选项变更获取商品
            getMerchantsGoods() {
                this.merchantsgoodslist = [];
                this.formData.ids = "";
                //   let query = {
                //     currentPage: 1,
                //     pageSize: 1000,
                //     userId: this.formData.userId,
                //   }
                this.checkQuery.userId = this.formData.userId;
                console.info(this.checkQuery);
                this.checkLoading = true;
                getMerchantsGoods(this.checkQuery)
                    .then(response => {
                        console.log(response);
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.checkLoading = false;
                            return false;
                        }
                        this.checkLoading = false;
                        this.checkTotalNumber = response.data.totalNumber || 0;
                        this.merchantsgoodslist = response.data.list || [];
                        console.log(this.merchantsgoodslist);
                    })
                    .catch(() => {
                        this.checkLoading = false;
                        this.merchantsgoodslist = [];
                    });
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getAdminList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getAdminList();
            },
            /*弹窗 查询*/
            onCheckSubmit() {
                this.checkQuery.pageSize = 1;
                this.getOrderList();
            },
            /*弹窗 选择每页条数【10,20,30,40,50】*/
            checkHandleSizeChange(val) {
                this.checkQuery.pageSize = val;
                this.getOrderList();
            },
            /*弹窗 点击页数*/
            checkHandleCurrentChange(val) {
                this.checkQuery.currentPage = val;
                this.getOrderList();
            },
            /*弹窗 列表复选框选择事件*/
            checkHandleSelectionChange(val) {
                console.log(val);
                let arr = [];
                val.forEach((value, index) => {
                    console.log(index);
                    arr.push(value.commodityid);
                });
                this.commodityIdArr = arr;
            },
            /*取消全选事件*/
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            /*列表复选框选择事件*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },

            /*全选删除事件*/
            delGroup() {
                console.log(this.multipleSelection);
                var ids = this.multipleSelection
                    .map(item => item.dailynewid)
                    .join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },

            /*单击删除事件*/
            handleDel(ids) {
                if (ids) {
                    this.$confirm("确认要删除吗?", "提示", {
                        type: "warning"
                    })
                        .then(() => {
                            this.loading = true;
                            var params = new URLSearchParams();
                            params.append("dailyNewIds", ids);
                            // deleteDailyNew(params)
                            //     .then(response => {
                            //         this.loading = false;
                            //         if (response.code) {
                            //             this.$message.error(response.message);
                            //             return false;
                            //         }
                            //         this.$message.success("删除成功");
                            //         // 刷新数据
                            //         //this.list.splice(index, 1);
                            //         this.getAdminList();
                            //         this.getOrderList();
                            //     })
                            //     .catch(() => {
                            //         this.loading = false;
                            //     });
                        })
                        .catch(() => {
                            this.$message.warning("已取消");
                        });
                }
            }
        },
        created() {
            this.getAdminList();
            // this.getOrderList();
        }
    };
</script>
